<template>
  <div class="whole-container">
    <div class="whole-header">
      <h2>广告分类</h2>
    </div>
    <div class="whole-main">
      <div class="list-container">
        <div class="list-header">
          <h3>列表</h3>
        </div>
        <div class="list-main">
          <div class="table-container">
            <div class="table-header">
              <div 
                v-for="(item,index) in listLabel"
                :key="index"
                class="table-header-item"
              >
                <span>{{item.name}}({{item.key}})</span>
              </div>
            </div>
            <div class="table-content">
              <div
                class="table-content-row"
                v-for="(dataItem, i) in listData"
                :key="i"
              >
                <div
                 v-for="(labelItem, v) in listLabel"
                :key="v" 
                class="table-content-row-item"
                >
                  <span>{{dataItem[labelItem.key]}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tree-container">
        <div class="tree-header">
          <h3>树型</h3>
        </div>
        <div class="tree-main">
          <el-tree 
            class="advTree"
            v-loading="loading"
            node-key="code"
            :data="treeData" 
            :props="defaultProps"
            highlight-current
          ></el-tree>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Advert",
  data() {
    return {
      listLabel: [
        {
          key: "code",
          name: "编码"
        },{
          key: "name",
          name: "名称"
        },{
          key: "pcode",
          name: "父编码"
        }
      ],
      listData: [
        {
          code: "100",
          name: "按内容分"
        },
        {
          code: "200",
          name: "按目的分"
        },
        {
          code: "300",
          name: "按策略分"
        },
        {
          code: "400",
          name: "按传播媒介分"
        },
        //-------------------------------------------
        {
          code: "101",
          name: "产品广告",
          pcode: "100"
        },
        {
          code: "102",
          name: "品牌广告",
          pcode: "100"
        },
        {
          code: "103",
          name: "观念广告",
          pcode: "100"
        },
        //-------------------------------------------
        {
          code: "201",
          name: "告知广告",
          pcode: "200"
        },
        {
          code: "202",
          name: "促销广告",
          pcode: "100"
        },
        {
          code: "203",
          name: "形象广告",
          pcode: "200"
        },
        {
          code: "204",
          name: "建议广告",
          pcode: "200"
        },
        {
          code: "205",
          name: "公益广告",
          pcode: "200"
        },
        {
          code: "206",
          name: "推广广告",
          pcode: "200"
        },
        //-------------------------------------------
        {
          code: "301",
          name: "单篇广告",
          pcode: "300"
        },
        {
          code: "302",
          name: "系列广告",
          pcode: "300"
        },
        {
          code: "303",
          name: "集中型广告",
          pcode: "300"
        },
        {
          code: "304",
          name: "反复广告",
          pcode: "300"
        },
        {
          code: "305",
          name: "营销广告",
          pcode: "300"
        },
        //-------------------------------------------
        {
          code: "401",
          name: "报纸广告",
          pcode: "400"
        },
        {
          code: "402",
          name: "电视广告",
          pcode: "400"
        },
        {
          code: "403",
          name: "电影广告",
          pcode: "400"
        },
        {
          code: "404",
          name: "网络广告",
          pcode: "400"
        },
        {
          code: "405",
          name: "广播广告",
          pcode: "400"
        }
      ],
      treeData: [],
      loading: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  mounted() {
    this.getTreeData()
  },
  methods: {
    listToTree(lists, id, parentId) {
      let idList = {},
        treeList = []
      for (let i = 0, len = lists.length; i < len; i++) {
        //生成一个以id为键的对象
        idList[lists[i][id]] = lists[i]
      }
      for (var j = 0, len1 = lists.length; j < len1; j++) {
        let aVal = lists[j]
        let aValParent = idList[aVal[parentId]]
        //如果avalParent存在;就说明当前的avaL是avalParent的子集if (avalParent){
        if (aValParent) {
          if ('children' in aValParent) {
            aValParent['children'].push(aVal)
          } else {
            aValParent['children'] = []
            aValParent['children'].push(aVal)
          }
        } else {
          treeList.push(aVal)
        }
      }
      return treeList
    },
    getTreeData() {
      this.loading = true;
      this.treeData = this.listToTree(this.listData,"code","pcode");
      this.loading = false;
    },
  },
}
</script>

<style lang="less" scoped>
.whole-container {
  width: 100%;
  height: 100%;
  background: #f1f2f5;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
        overflow-y: auto;

  .whole-header {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #aaa;
  }

  .whole-main {
    width: 100%;
    flex: 1;
    display: flex;

    .list-container {
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      border-right: 1px solid #aaa;

      .list-header {
        width: 100%;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        
        border-bottom: 1px solid #aaa;
      }
      .list-main {
        width: 100%;
        flex: 1;
        // background: blanchedalmond;
        
        .table-container {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          .table-header {
            width: 100%;
            height: 40px;
            display: flex;
            flex-wrap: nowrap;
            margin-bottom: 8px;
            .table-header-item {
              flex: 1;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              background: rgb(91, 91, 255);
              margin-right: 8px;
              color: #fff;
              &:last-child {
                margin-right: 0;
              }
            }
          }
          .table-content {
            width: 100%;
            flex: 1;
            
            .table-content-row {
              width: 100%;
              height: 40px;
              margin-bottom: 8px;
              &:last-child {
                margin-bottom: 0;
              }
              display: flex;
              flex-wrap: nowrap;
              .table-content-row-item {
                flex: 1;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                background: rgba(53, 51, 51, 0.292);
                margin-right: 8px;
                &:last-child {
                  margin-right: 0;
                }
              }
            }
          }
        }
      }
    }

    .tree-container {
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;

      .tree-header {
        width: 100%;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid #aaa;
      }
      .tree-main {
        width: 100%;
        flex: 1;
        // background: greenyellow;
      }
    }
  }
}

::v-deep .advTree.el-tree {
  background: transparent;
  .el-tree-node__content {
    height: 30px;
  }
  .el-tree-node__content:hover {
    background-color: #c7dff7;
  }
}
</style>